<!--明亮/暗黑主题切换组件 萧大侠 xyhxmzg@163.com-->
<template>
    <el-tooltip :content="isDark ? '切换白天' : '切换黑夜'" effect="dark" placement="bottom">
        <el-button v-if="isDark" type="text" class="right-menu-item" @click=handleThemeChange(false)><svg-icon icon-class="taiyang" /></el-button>
        <el-button v-else type="text" class="right-menu-item" @click=handleThemeChange(true)><svg-icon icon-class="yueliang" /></el-button>
    </el-tooltip>
</template>
<script setup lang="ts">
import SvgIcon from "@/components/SvgIcon/index.vue";

import { useSettingsStore } from "@/store/modules/settings";

import { ref, reactive, computed } from "vue";
import { onBeforeMount, onMounted, onBeforeUnmount, onUnmounted } from "vue";
const settingsStore = useSettingsStore();

const { title, version } = settingsStore;
/**
 * 明亮/暗黑主题切换
 */
const isDark = computed(() => settingsStore.theme === "dark");
//定义一个变量
const myName = ref("萧大侠");
//定义一个数据集
const formData = reactive({
  name: "",
  region: "",
});
onBeforeMount(() => {
  console.log("组件挂载前");
});
onMounted(() => {
  initData();
  console.log("组件挂载完成");
});
onBeforeUnmount(() => {
  console.log("组件卸载之前");
});
onUnmounted(() => {
  console.log("组件卸载完成");
});
const initData = () => {
  console.log(myName, formData);
};
const handleNew = (index: number) => {
  console.log("handleNew");
};
const handleEdit = (index: number) => {
  console.log("handleEdit");
};
const handleDelete = (index: number) => {
  console.log("handleDelete");
};
const onSubmit = () => {
  console.log("submit!");
};

const handleThemeChange = (isDark: any) => {
  settingsStore.changeSetting({
    key: "theme",
    value: isDark ? "dark" : "light",
  });
};
</script>